Add a documentation page with auto-generated screenshots#4
Merged
Conversation
Introduces a dedicated documentation site at /docs/, built as a second Vite entry point alongside the app and deployed to the same GitHub Pages site. It documents every feature — the matrix, team, tasks, schedule, and insights tabs, the goal bar and global controls, theming, CSV/JSON import, and the Talk2View assistant — plus a from-the-code walkthrough of the two algorithms (quadrant weights, capacity budget, and burnout thresholds for assignment; slot scoring and energy/concentration matching for scheduling). A philosophy section records where the method came from: the Eisenhower matrix the team kept drawing on paper and whiteboards while running internal projects at Talk2View Pty Ltd, and the annotations about who would enjoy, be good at, and have room for each task that grew into the pleasure/talent/capacity model. Every screenshot on the page is generated by Playwright rather than captured by hand. A spec under tests/e2e/screenshots reuses the existing e2e fixtures and seeds to drive the live app — seeding the demo project, freezing the clock so the schedule sub-views fill with real blocks, and loading the real fonts — then writes thirteen PNGs into public/screenshots/. The deploy workflow regenerates them before `vite build` (which copies them into dist/screenshots/), so the documentation never drifts out of date with the deployed UI. The capture step is best-effort: a transient failure degrades the docs to graceful placeholders rather than blocking the site deploy. The screenshots are gitignored and can be regenerated locally with `npm run screenshots`; the spec lives outside the e2e testDir and uses its own config, so `npm run test:e2e` never runs it. To let the docs reuse the app's exact look without bundling the whole application, the theme machinery, colour and style objects, and the small Pill/Slider/SectionHead primitives move out of App.jsx into a shared src/ui/theme.jsx that both entries import. The documentation page wraps that module in the real ThemeProvider, so theme presets, dark mode, and font choices carry across and persist via the same storage key. Finally, every primary control in the app — the five tabs, the header buttons, the add-member/task/category/stakeholder actions, and the schedule view switcher — gains a tooltip (src/ui/Tooltip.jsx) that pairs a one-line description with a "Learn more" link deep into the matching /docs/ section, and the header and footer gain a direct link to the documentation.
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a dedicated documentation site at
/docs/, built as a second Vite entry alongside the app and deployed to the same GitHub Pages site. It documents every feature, explains the philosophy/origin, embeds always-current Playwright screenshots, and adds doc-linked tooltips throughout the app.docs/index.html,src/docs/): 14 sections covering all 5 tabs, the goal bar + controls, theming, CSV/JSON import, the Talk2View assistant, and a from-the-code walkthrough of both the assignment and scheduling algorithms. Includes a philosophy section on the whiteboard origin of the method at Talk2View Pty Ltd, a sticky numbered TOC, theme toggle, and deep-link anchors.tests/e2e/screenshots/docs.screenshots.ts) reuses the existing e2e fixtures/seeds to drive the live app (demo project, frozen clock so schedule views fill, real fonts) and writes 13 PNGs intopublic/screenshots/. The deploy workflow regenerates them beforevite buildso the docs never drift from the deployed UI. Best-effort (continue-on-error), gitignored, regenerable vianpm run screenshots.src/ui/theme.jsx): theme machinery, colours, style objects, andPill/Slider/SectionHeadextracted out ofApp.jsxso both entries share them — keeping the docs bundle lean (~30 kB). Pure refactor, no behavior change.src/ui/Tooltip.jsx): every tab, header control, primary action button, and the schedule view switcher gets a tooltip with a description + a "Learn more →" deep link into the matching/docs/section. Header and footer link to the docs.Notes
main(scheduling, CSV import, and the e2e harness already merged). The screenshot pipeline plugs into the existing Playwright harness rather than duplicating it; the import section covers CSV + JSON; the license section reflects CC0 1.0.testDirand uses its own config, sonpm run test:e2enever runs it.Test plan
npm run buildproducesdist/docs/index.htmlanddist/screenshots/*.png(13 images)npm run screenshotsruns green (6 tests) and writes topublic/screenshots//docs/renders with app theming/fonts; TOC + deep-link anchors scroll correctlyjoy-matrix.com/docs/